<template>
    <div>
      <div
        v-for="(item, index) in forms"
        :key="index"
        style="margin-bottom:10px;"
      >
        <options-container
          v-if="builtinsTypes.includes(item.type)"
          :name="item.label"
          :type="item.type"
          :config="item.config"
          :extra="{selectedValue:form[item.formKey]}"
          @change="v => onOptionItemChange(v, item)"
        />
        <div v-else-if="item.type === 'mentions'">
          <mentions
            v-model="form[item.formKey]"
            @change="e => onFieldItemChange(e, item)"
          />
        </div>
        <div v-else>
          <div v-if="item.type === 'custom-button'">
            <el-button @click="item.onClick">{{item.buttonText}}</el-button>
          </div>
          <div v-else>
            未知类型: {{item.type}}
          </div>
        </div>
      </div>
    </div>
</template>

<script>
// import Vue from 'vue'
import { Form, FormItem, Input,Dropdown,DropdownItem,DropdownMenu,Switch,InputNumber,Cascader,Button } from "element-ui";
import mentions from "./mentions.vue";
import { Type } from "./options.constants";
import OptionsContainer from './options-container.vue'

export default {
  name: 'configure-group',
  props: {
    form: {
      type: Object,
    },
    options: {
      type: Array,
    },
  },
  watch: {
    options: {
      immediate: true,
      handler(options) {
        Promise.all(
          options.map((item) => {
            if (item.resolveOptions) {
              return item.resolveOptions().then((options) => {
                return { ...item, options };
              });
            }
            return item;
          })
        ).then((res) => {
          this.forms = res;
          this.$forceUpdate();
        });
      },
    },
  },
  components: {
    'el-form': Form, 
    'el-form-item': FormItem, 
    'el-input': Input,
    'el-dropdown': Dropdown,
    'el-dropdown-item': DropdownItem,
    'el-dropdown-menu': DropdownMenu,
    'el-switch': Switch,
    'el-input-number': InputNumber,
    'el-cascader': Cascader,
    'el-button': Button,
    mentions,
    'options-container': OptionsContainer
  },
  data() {
    return {
      forms: [],
      builtinsTypes: [Type.stepper, Type.array, Type.select, Type.multiSelect, Type.text, Type.switch, Type.upload],
      Type,
    };
  },
  methods: {
    onOptionItemChange(value, item) {
      this.onFieldItemChange(value, item)
    },
    onTest(value, item) {
      console.log('onTest ', value, item)
      // this.onFieldItemChange(value, item)
    },
    getShowText(item) {
      if (item.formKey in this.form) {
        const match = item.options.find(
          (opt) => opt.value === this.form[item.formKey]
        );
        if (match) {
          return match.label;
        }
      }
    },
    reset() {
      this.forms = [];
      this.$forceUpdate();
    },
    onFieldItemChange(value, item) {
      this.$emit("onFormItemChange", { key: item.formKey, value, item });
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>